<template>
    <div class="chart-wrapper">
        <h3 class="chart-title" style="font-size: 30px;font-family: 宋体;">历年农作物产量对比</h3>
        <div ref="myEcharts" style="width:100%;height:600px"></div>
    </div>
</template>

<script setup>
    import * as echarts from 'echarts'
    import { ref, onMounted, reactive } from 'vue';
    import axios from 'axios';
    
    const myEcharts = ref();
    let options = reactive([])
    
    function echartsInit(){
        const mc = echarts.init(myEcharts.value, {
            backgroundColor: 'transparent'
        })
        var option = {
            backgroundColor: 'transparent',
            legend: {
                top: '5%',
                textStyle: {
                    color: '#ffffff',
                    fontFamily: 'SimSun'
                }
            },
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            xAxis: { 
                type: 'category',
                axisLabel: {
                    interval: 0,
                    rotate: 45,
                    margin: 10
                },
                data: options.map(item => item.year)
            },
            yAxis: { gridIndex: 0 },
            grid: { 
                top: '70%',
                bottom: '15%',
                height: '25%'
            },
            series: [
                {
                    name: '谷物产量',
                    type: 'line',
                    smooth: true,
                    emphasis: { focus: 'series' },
                    data: options.map(item => item.cerealyield)
                },
                {
                    name: '豆类产量',
                    type: 'line',
                    smooth: true,
                    emphasis: { focus: 'series' },
                    data: options.map(item => item.legumesyield)
                },
                {
                    name: '薯类产量',
                    type: 'line',
                    smooth: true,
                    emphasis: { focus: 'series' },
                    data: options.map(item => item.potatoproduction)
                },
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '40%',
                    center: ['50%', '32%'],
                    emphasis: {
                        focus: 'self'
                    },
                    data: [
                        { 
                            name: '谷物产量', 
                            value: options[0]?.cerealyield || 0,
                            itemStyle: { color: '#91cc75' }
                        },
                        { 
                            name: '豆类产量', 
                            value: options[0]?.legumesyield || 0,
                            itemStyle: { color: '#fac858' }
                        },
                        { 
                            name: '薯类产量', 
                            value: options[0]?.potatoproduction || 0,
                            itemStyle: { color: '#ee6666' }
                        }
                    ],
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    }
                }
            ]
        };

        mc.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value;
                mc.setOption({
                    series: {
                        id: 'pie',
                        data: [
                            { 
                                name: '谷物产量', 
                                value: options[dimension]?.cerealyield || 0,
                                itemStyle: { color: '#91cc75' }
                            },
                            { 
                                name: '豆类产量', 
                                value: options[dimension]?.legumesyield || 0,
                                itemStyle: { color: '#fac858' }
                            },
                            { 
                                name: '薯类产量', 
                                value: options[dimension]?.potatoproduction || 0,
                                itemStyle: { color: '#ee6666' }
                            }
                        ]
                    }
                });
            }
        });

        mc.setOption(option);
    }

    function getData(){
        axios.get('/api/queryCropRanks')
            .then((response)=>{
                if(response.data.code==200){
                    options = response.data.data;
                    echartsInit();
                }
            })
    }

    onMounted(()=>{
        getData();
    })
</script>

<style scoped>
.chart-wrapper {
    width: 100%;
    height: 100%;
    padding: 10px;
    background: transparent;
}

.chart-title {
    color: #fff;
    margin: 20px;
    font-size: 20px;
    margin-bottom: 90px;
    text-align: left;
    padding-left: 20px;
}
</style> 